<!DOCTYPE html>
<html lang="en" xmlns="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>精英战场 - Happy Study</title>
    <meta name="keywords" content="Happy Study，快乐学习，开心学习，Java、C++、Python，在线平台，在线笔记，笔记平台，在线Java题库，Java自学平台">
    <meta name="description" content="Happy Study - Java、C++、Python、小程序等主流语言自学平台主流计算机语言在线自学平台">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/all.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/paper.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/paper.js}"></script>
    <script type="text/javascript" th:src="@{/js/main.js}"></script>
</head>
<body>
<div class="app main-div">
    <!--<div th:replace="~{commons::headerbar(active='paperList')}"></div>-->
    <div class="paper-header">
        <div class="header-inner">
            <h2 class="title">
                [[${paperEntity.paperName}]]<span class="sp">（[[${paperEntity.categoryName}]]）</span><span th:text="${paperEntity.paperId}" class="paper-id"></span>
            </h2>
            <!--<div class="ci-timer">
                <input type="hidden" value="1611329313134" id="endTime">
             </div>-->
            <div class="button">
                <span class="coll-paper"><i class="layui-icon layui-icon-star-fill" style="margin-right: 5px;"></i>收藏</span>
                <span class="feedback"><i class="layui-icon layui-icon-tips" style="margin-right: 5px;"></i>问题反馈</span>
                <button class="layui-btn layui-btn-normal save-paper">提交试卷</button>
            </div>
        </div>
    </div>
    <!--试卷内容-->
    <div class="paper-content">
        <div class="paper-base-info">
            <div class="icon-user"></div>
            <div class="user-info">
                <h2>答题卡</h2>
            </div>
            <div class="sub-number">
                <div class="sub-number-list">
                    <!-- 利用js增加锚点 -->
                    <div th:each="subjectEntity, status : ${subjectEntities}" class="item" th:onclick="'javascript:document.getElementById('+${status.index+1}+').scrollIntoView()'">[[${status.index+1}]]</div>
                </div>
            </div>
        </div>
        <div class="subject-item">
            <div class="subject-head">
                <h3>
                    1、选择题 <small>（共<span th:text="${subjectEntities.size()}" class="subject-length"></span>题。）</small>
                </h3>
            </div>
            <!--卡片面板-->
            <div class="layui-col-md12 sub-item" th:each="subjectEntity, status : ${subjectEntities}">
                <div class="layui-card">
                    <div class="layui-card-header">
                        <span th:id="${status.index+1}">
                            <pre>[[${status.index+1}]].&nbsp;[[${subjectEntity.subjectContent}]]</pre>
                        </span>
                    </div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item" pane="">
                                <div class="layui-input-block">
                                    <div class="sub-option-lists" th:each="optionEntity : ${subjectEntity.optionEntities}" >
                                        <input type="hidden" th:value="${subjectEntity.subjectId}" th:id="'subjectId_'+${status.index}" />
                                        <!-- th:name用于获取题目选项，th:attr用于触发左侧题目序号是否被选择，lay-filter：radio的触发事件 -->
                                        <input type="radio" th:name="'subject_'+${status.index}" th:attr-index="${status.index+1}" lay-filter="option-check" lay-skin="primary" th:title="${optionEntity.optionContent}" th:value="${optionEntity.optionId}">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 问题反馈 -->
<script type="text/html" id="feedback-panel">
    <div class="feed-index">
        <div class="feed-box clearfix">
            <p class="l feed-title">反馈</p>
        </div>
        <div class="feed-option-list">
            <div>反馈问题类型：</div>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <input type="radio" name="feed-radio" value="1" title="答题卡">
                        <input type="radio" name="feed-radio" value="2" title="题库">
                        <input type="radio" name="feed-radio" value="3" title="题目">
                        <input type="radio" name="feed-radio" value="4" title="收藏">
                        <input type="radio" name="feed-radio" value="5" title="提交">
                    </div>
                </div>
            </form>
        </div>
        <div class="feed-option">
            <textarea name="desc" placeholder="请输入具体反馈内容" class="layui-textarea" id="feed-content"></textarea>
        </div>
        <div class="feed-btn">
            <button class="layui-btn layui-btn-normal layui-btn-sm submit-btn">提交</button>
        </div>
    </div>
</script>
</html>
